<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汇智首页</title>
    <link rel="stylesheet" href="./css/search.css">
    <!-- 1. 下载轮播插件并引入 -->
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/banner.css">
    <link rel="stylesheet" href="./css/category.css">
    <link rel="stylesheet" href="./css/product.css">
    <link rel="stylesheet" href="./css/tabbar.css">

    <style>
        /* 1. 将body设置为弹性盒子布局
           2. 改变主轴为垂直方向
           3. 中间滚动区域 设置flex-grow:1
                设置溢出滚动 over-flower:scroll
                设置中间区域高度  整个高度-顶部和底部区域
        */

        body{
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100%;
        }

        .g-wrapper{
            overflow: scroll;
            height: 85vh;
            /* height: calc(100vh-50-70); */
        }


    </style>
</head>

<body>
    <!-- 搜索区域 -->
    <div class="g-search">
        <h2>城市</h2>
        <input type="text" placeholder="请输入搜索内容">
        <h2>登录</h2>
    </div>

    <div class="g-wrapper">
        <!-- 轮播区域 -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../img/11.jpg" alt="11">
                </div>
                <div class="swiper-slide">
                    <img src="../img/22.jpg" alt="11">
                </div>
                <div class="swiper-slide">
                    <img src="../img/33.jpg" alt="11">
                </div>
            </div>

            <!--分页器。如果放置在swiper外面，需要自定义样式。-->
            <div class="swiper-pagination"></div>
        </div>

        <!-- 分类区域 -->
        <div class="g-category">
            <div class="box">
                <img src="../img/11.jpg" alt="11">
                <p>美食</p>
            </div>

            <div class="box">
                <img src="../img/22.jpg" alt="11">
                <p>电脑</p>
            </div>

            <div class="box">
                <img src="../img/33.jpg" alt="11">
                <p>手机</p>
            </div>

            <div class="box">
                <img src="../img/44.jpg" alt="11">
                <p>数码</p>
            </div>

            <div class="box">
                <img src="../img/11.jpg" alt="11">
                <p>美食</p>
            </div>

            <div class="box">
                <img src="../img/22.jpg" alt="11">
                <p>电脑</p>
            </div>

            <div class="box">
                <img src="../img/33.jpg" alt="11">
                <p>美食</p>
            </div>

            <div class="box">
                <img src="../img/44.jpg" alt="11">
                <p>电脑</p>
            </div>

            <div class="box">
                <img src="../img/11.jpg" alt="11">
                <p>数码</p>
            </div>

            <div class="box">
                <img src="../img/22.jpg" alt="11">
                <p>手机</p>
            </div>
        </div>

        <!-- 商品列表 -->
        <div class="g-product-wrapper">
            <div class="g-product">
                <img src="../img/11.jpg" alt="11">
                <div class="g-right">
                    <h2>科隆</h2>
                    <p>科隆正1.5宵</p>
                    <p>价格:90￥</p>
                </div>
            </div>

            <div class="g-product">
                <img src="../img/22.jpg" alt="11">
                <div class="g-right">
                    <h2>科隆</h2>
                    <p>科隆正1.5宵</p>
                    <p>价格:90￥</p>
                </div>
            </div>

            <div class="g-product">
                <img src="../img/33.jpg" alt="11">
                <div class="g-right">
                    <h2>科隆</h2>
                    <p>科隆正1.5宵</p>
                    <p>价格:90￥</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部区域tabbar -->
    <div class="g-footer">
        <div class="active">首页</div>
        <div>分类</div>
        <div>购物车</div>
        <div>我的</div>
    </div>

    <!-- js代码 -->
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <!-- 4. 初始化轮播插件swiper -->
    <script>
        new Swiper('.swiper', {
            loop: true,  //无限循环
            autoplay: true, //自动轮播
            // effect: 'cards', //切换效果
            pagination: {
                el: '.swiper-pagination',
            },
        })
    </script>
</body>

</html>